<template>
  <div class="audit" v-wechat="$route.meta.title">
    <div class="tabs">
      <van-tabs color="#FE8B01">
        <van-tab
          v-for="(item,index) in dataList"
          @change="Tabs(item)"
          :title="item.trackCount"
          :key="index"
        >
          <div class="main">
            <div class="titles">
              <i id="i"></i>
              <h2>{{$t('addMsg.thxyqk')}}</h2>
            </div>
            <van-cell-group>
              <van-field
                readonly
                clickable
                name="picker"
                v-model="item.executionStatus"
                :label="$t('addMsg.ssjd')"
                input-align="right"
              />
            </van-cell-group>
            <van-cell-group>
              <van-field
                readonly
                :label="$t('addMsg.ssje-w')"
                label-width="150px"
                input-align="right"
                v-model="item.amount"
              ></van-field>
            </van-cell-group>
            <van-cell-group>
              <van-field :label="$t('message.ssqkjs')" readonly />
              <van-field
                rows="3"
                autosize
                v-model="item.implementationInformation"
                label-width="98px"
                type="textarea"
                maxlength="512"
                border
                readonly
                show-word-limit
              />
            </van-cell-group>
            <!-- <div class="upfile" v-if="item.ossUrlList.length>0">
              <p>{{$t('message.scfj')}}:</p>
              <div class="fileList">
                <p v-for="item in item.ossUrlList" :key="item.id">
                  <a
                    :href="['http://cm-m-back-test.ciftis.org.cn/api/oss/downloadOSS?fileName='+item.fileName]"
                  >{{item.originalFileName}}</a>
                </p>
              </div>
            </div> -->
            <downLoad :pfileList="dataList[index].ossUrlList"></downLoad>
          </div>
          <div class="userInfo">
            <div class="titles">
              <i id="i"></i>
              <h2>{{$t('message.txrxx')}}</h2>
            </div>
            <!-- 输入任意文本 -->
            <van-cell-group>
              <van-field
                readonly
                input-align="right"
                v-model="item.filledBy"
                :label="$t('message.tbr')"
              />
            </van-cell-group>
            <!-- 输入手机号，调起手机号键盘 -->
            <van-cell-group>
              <van-field
                readonly
                input-align="right"
                v-model="item.phone"
                type="tel"
                :label="$t('message.lxdh')"
              />
            </van-cell-group>
            <!-- 允许输入数字，调起带符号的纯数字键盘 -->
            <van-cell-group>
              <van-field
                type="tel"
                input-align="right"
                :label="$t('message.zjhm')"
                v-model="item.seatNumber"
                readonly
              />
            </van-cell-group>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div class="footer">
      <van-button type="info" @click="contrackDetail" class="btn">{{$t('addMsg.htxq')}}</van-button>
    </div>
  </div>
</template>

<script>
import env from "@/assets/js/env";
import downLoad from "@/components/downLoad";
export default {
    components:{
        downLoad
    },
  data() {
    return {
      value: "1345",
      dataList: []
    };
  },
  mounted() {
    this.$axios

      .get("/api/contractTrack/getInfos", {
        id: this.$route.query.id
      })
      .then(res => {
        this.dataList = res.data.data;
      })
      .catch(err => {
        this.$toast("err");
      });
  },
  methods: {
    contrackDetail() {
      this.$router.push({
        path: "/contractDetail",
        query: {
          id: this.$route.query.id
        }
      });
    },
    Tabs(item) {
      console.log(item);
    }
  }
};
</script>

<style lang="scss" scoped>
.audit {
  height: 100%;
  background: transparent;
  padding: 15px 15px 0;
  overflow: auto;
}
.main {
  background: #fff;
  padding: 0 0 17px;
  border-radius: 8px;
  .update {
    color: #999999;
    font-size: 12px;
    .up {
      width: 102px;
      height: 32px;
      margin: 20px 0 9px;
      color: #fff;
      font-size: 14px;
    }
  }
}
.titles {
  height: 47px;
  font-size: 14px;
  line-height: 48px;
  font-family: PingFangHK-Medium;
  color: #212121;
  display: flex;
  align-items: center;
  i#i {
    width: 5px;
    height: 15px;
    background: #ffbc3a;
  }
  h2 {
    margin-left: 6px;
  }
}
.userInfo {
  margin-top: 10px;
  background: #fff;
  padding: 0;
  border-radius: 8px;
}
.tabs {
  padding: 0 15px;
  border-radius: 8px;
  background: #fff;
  margin-bottom: 15px;
}
.upfile {
  margin-top: 10px;
  min-height: 44px;
  display: flex;
  p {
    flex: 1;
    text-align: right;
    min-width:50px;
  }
  .fileList {
    padding-left: 5px;
  }
}
.footer {
  margin-top: 48px;
  padding: 0 15px;
  .btn {
    width: 100%;
    height: 40px;
    font-size: 16px;
    margin-bottom: 15px;
    border-radius: 20px;
  }
  .btn:first-child {
    background-image: linear-gradient(90deg, #fecf47 0%, #ffbc39 100%);
    border: none;
  }
}
</style>